import React, { Component, Suspense } from 'react';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import PageLoading from "@/components/PageLoading";
import { connect } from 'dva';
import { Card, Button, Form, Modal, Input, Table, Icon, message, Select, DatePicker } from 'antd';
import styles from './index.less';
import moment from 'moment';
import { formatMessage } from 'umi-plugin-react/locale';
import { getReportRecordList, getReportRecordDetail, postReportRecordProcessing } from '@/services/securityCenter';


class reportRecord extends Component {
	constructor(props) {
		super(props);
		this.state = {
			current: 1,
			size: 10,
			total: 0,
			loading: false,
			list: [],
			visible: false,
			detailData: null,
			reportContent: '',
		};
	}

	componentDidMount() {
		this.getList()
	}

	getList = () => {
		const { form } = this.props;
		const { current, size } = this.state;
		let formInfo = form.getFieldsValue();
		console.log(formInfo);
		this.setState({ loading: true }, async () => {
			let obj = {
				current,
				size,
				search: formInfo?.search,
				status: formInfo?.status,
				fromDate: formInfo?.time && formInfo.time.length > 0 ? moment(formInfo.time[0]).format('YYYY-MM-DD') : undefined,
				toDate: formInfo?.time && formInfo.time.length > 0 ? moment(formInfo.time[1]).format('YYYY-MM-DD') : undefined,
			};
			const res = await getReportRecordList(obj)
			this.setState({
				loading: false,
				list: res.records,
				total: res.total
			})
		})
	}

	doSearch = (current, size) => {
		this.setState({ current, size }, () => {
			this.getList()
		})
	}

	toReasonProcessing = id => {
		this.setState({ visible: true }, () => this.setDetailData(id))
	}

	toReasonDetail = id => {
		this.setState({ visible: true }, () => this.setDetailData(id))
	}

	setCancel = () => {
		this.setState({ visible: false, detailData: null, reportContent: '' })
	}

	setDetailData = async id => {
		let res = await getReportRecordDetail({ id });
		console.log(res);
		this.setState({ detailData: res })
	}

	onTextChange = e => {
		this.setState({ reportContent: e.target.value })
	}

	setSubmit = async e => {
		e.stopPropagation();
        e.preventDefault();
		const { detailData, reportContent } = this.state;
		let obj = { id: detailData?.id, feedback: reportContent }
		let res = await postReportRecordProcessing(obj);
		console.log(res);
		if (res.code == 0) {
			message.success('处理成功');
			this.setCancel();
			this.getList();
		}
	}

	render() {
		const { form: { getFieldDecorator } } = this.props;
		const { current, size, total, list, loading, visible, detailData } = this.state;
		const columns = [
			// {
			// 	title: formatMessage({ id: 'largeModelCenter.securityCenter.reportRecord.reportId', defaultMessage: '举报编号' }),
			// 	dataIndex: 'id',
			// 	width: 200,
			// },
			{
				title: formatMessage({ id: 'largeModelCenter.securityCenter.reportRecord.reportUser', defaultMessage: '提交人' }),
				dataIndex: 'reportUser',
				width: 140,
			},
			{
				title: formatMessage({ id: 'largeModelCenter.securityCenter.reportRecord.question', defaultMessage: '问题' }),
				dataIndex: 'question',
				width: 200,
			},
			{
				title: formatMessage({ id: 'largeModelCenter.securityCenter.reportRecord.answer', defaultMessage: '答案' }),
				dataIndex: 'answer',
				width: 360,
				render: text => {
					let label = `<p style="text-align: justify;
					-webkit-line-clamp: 3;
					display: -webkit-box;
					overflow: hidden;
					-webkit-box-orient: vertical;
					text-overflow: ellipsis;
					line-height: 24px;">`+text+`</p>`;
					return <div dangerouslySetInnerHTML={{ __html: label }} />;
				}
			},
			{
				title: formatMessage({ id: 'largeModelCenter.securityCenter.reportRecord.reportContent', defaultMessage: '举报内容' }),
				dataIndex: 'reason',
				width: 200,
			},
			{
				title: formatMessage({ id: 'largeModelCenter.securityCenter.reportRecord.submitTime', defaultMessage: '提交时间' }),
				dataIndex: 'reportTime',
				width: 150,
				render: time => {
					return time ? moment(time).format("YYYY-MM-DD HH:mm") : '';
				}
			},
			{
				title: formatMessage({ id: 'largeModelCenter.securityCenter.reportRecord.Customer', defaultMessage: '所属公司' }),
				dataIndex: 'customer',
				width: 130,
			},
			{
				title: formatMessage({ id: 'largeModelCenter.securityCenter.reportRecord.processStatus', defaultMessage: '处理状态' }),
				dataIndex: 'status',
				width: 120,
				render: (status, row) => {
					let text = '';
					switch (status) {
						case 0:
							text = formatMessage({ id: 'largeModelCenter.securityCenter.reportRecord.unprocessed', defaultMessage: '未处理' });
							break;
						case 1:
							text = formatMessage({ id: 'largeModelCenter.securityCenter.reportRecord.processed', defaultMessage: '已处理' });
							break;
					};
					return <span>{text}</span>;
				}
			},
			{
				title: formatMessage({ id: 'largeModelCenter.securityCenter.reportRecord.processTime', defaultMessage: '处理时间' }),
				dataIndex: 'processedTime',
				width: 120,
				render: time => {
					return time ? moment(time).format("YYYY-MM-DD HH:mm") : '';
				}
			},
			{
				title: formatMessage({ id: 'largeModelCenter.securityCenter.reportRecord.feedbackContent', defaultMessage: '反馈内容' }),
				dataIndex: 'feedback',
				width: 160,
			},
			{
				title: formatMessage({ id: 'largeModelCenter.securityCenter.reportRecord.actions', defaultMessage: '操作' }),
				align: 'center',
				fixed: 'right',
				width: 120,
				render: (_, row) => {
					return (
						<>
							{row.status == '0' ? (
								<Button type='danger' onClick={() => this.toReasonProcessing(row.id)}>{formatMessage({ id: 'largeModelCenter.securityCenter.reportRecord.process', defaultMessage: '处理' })}</Button>
							) : null}
							{row.status == '1' ? (
								<Button type='primary' onClick={() => this.toReasonDetail(row.id)}>{formatMessage({ id: 'largeModelCenter.securityCenter.reportRecord.view', defaultMessage: '查看' })}</Button>
							) : null}
						</>
					)
				}
			}
		];

		return (
			<Suspense fallback={<PageLoading />}>
				<PageHeaderWrapper>
					<Card bordered={false}>
						<div className={styles.top}>
							<div>
								<Form layout="inline">
									<Form.Item>
										{getFieldDecorator("status", { initialValue: null })(
											<Select style={{ width: '160px' }}>
												<Select.Option value={null}>{formatMessage({ id: 'largeModelCenter.securityCenter.reportRecord.all', defaultMessage: '全部' })}</Select.Option>
												<Select.Option value={'1'}>{formatMessage({ id: 'largeModelCenter.securityCenter.reportRecord.processed', defaultMessage: '已处理' })}</Select.Option>
												<Select.Option value={'0'}>{formatMessage({ id: 'largeModelCenter.securityCenter.reportRecord.unprocessed', defaultMessage: '未处理' })}</Select.Option>
											</Select>
										)}
									</Form.Item>
									<Form.Item>
										{getFieldDecorator("time", {
											initialValue: [moment().subtract('7', 'days'), moment()],
										})(<DatePicker.RangePicker allowClear={false} style={{ width: '240px' }} />)}
									</Form.Item>
									<Form.Item>
										{getFieldDecorator("search")(
											<Input placeholder={formatMessage({ id: 'largeModelCenter.securityCenter.reportRecord.searchPlaceholder', defaultMessage: '查询编号/问题/提交人/举报内容' })} style={{ width: '280px' }} />
										)}
									</Form.Item>
									<Form.Item>
										<Button type="primary" onClick={() => this.doSearch(1, size)}>{formatMessage({ id: 'largeModelCenter.securityCenter.reportRecord.search', defaultMessage: '查询' })}</Button>
									</Form.Item>
								</Form>
							</div>
							{/* <Button type="primary" onClick={this.openModal}>添加</Button> */}
						</div>

						<Table
							columns={columns}
							dataSource={list}
							loading={loading}
							scroll={{ x: "auto" }}
							rowKey={'id'}
							pagination={{
								total,
								current,
								pageSize: size,
								showQuickJumper: true,
								showSizeChanger: true,
								onChange: this.doSearch,
								onShowSizeChange: this.doSearch
							}}
						/>
					</Card>
					<Modal title={'举报详情'} onCancel={this.setCancel} visible={visible} destroyOnClose width={640} footer={null}>
						<div>
							<p>
								<label style={{ fontWeight: 'bold' }}>{formatMessage({ id: 'largeModelCenter.securityCenter.reportRecord.question', defaultMessage: '问题' })}：</label>
								{detailData?.chatTime ? <span>{moment(detailData.chatTime).format('YYYY-MM-DD HH:mm:ss')}</span> : null}
							</p>
							<p style={{ padding: 12, background: '#f2f2f2', borderRadius: '5px' }}>{detailData?.question}</p>
						</div>
						<div>
							<p>
								<label style={{ fontWeight: 'bold' }}>{formatMessage({ id: 'largeModelCenter.securityCenter.reportRecord.answer', defaultMessage: '答案' })}：</label>
								{detailData?.chatTime ? <span>{moment(detailData.chatTime).format('YYYY-MM-DD HH:mm:ss')}</span> : null}
							</p>
							<p style={{ padding: 12, background: '#f2f2f2', borderRadius: '5px' }}>{detailData?.answer}</p>
						</div>
						<div>
							<p>
								<label style={{ fontWeight: 'bold' }}>{formatMessage({ id: 'largeModelCenter.securityCenter.reportRecord.reportContent', defaultMessage: '举报内容' })}：</label>
								{detailData?.reportTime ? <span>{moment(detailData.reportTime).format('YYYY-MM-DD HH:mm:ss')}</span> : null}
							</p>
							<p style={{ padding: 12, background: '#f2f2f2', borderRadius: '5px' }}>{detailData?.reason}</p>
						</div>
						<div>
							<p>
								<label style={{ fontWeight: 'bold' }}>{formatMessage({ id: 'largeModelCenter.securityCenter.reportRecord.feedback', defaultMessage: '反馈' })}：</label>
								{detailData?.processedTime ? (
									<span>{moment(detailData.processedTime).format('YYYY-MM-DD HH:mm:ss')}</span>
								) : null}
							</p>
							<>
								{detailData?.feedback ? (
									<p style={{ padding: 12, background: '#f2f2f2', borderRadius: '5px' }}>{detailData.feedback}</p>
								) : (
									<p><Input.TextArea onChange={this.onTextChange} /></p>
								)}
							</>
						</div>
						{detailData?.feedback ? null : (
							<div style={{ display: 'flex', justifyContent: 'center', gap: 24 }}>
								<Button onClick={this.setCancel}>{formatMessage({ id: 'largeModelCenter.securityCenter.reportRecord.cancel', defaultMessage: '取消' })}</Button>
								<Button type="primary" onClick={this.setSubmit}>{formatMessage({ id: 'largeModelCenter.securityCenter.reportRecord.confirmFeedback', defaultMessage: '确认反馈' })}</Button>
							</div>
						)}
					</Modal>
				</PageHeaderWrapper>
			</Suspense>
		);
	}
}

export default Form.create()(reportRecord);
